<template>
  <view class="pwn-login-container">

   <view class="title">
		账号密码登录
   </view>
   <view class="desc">
		请使用已注册的账号密码
   </view>
   
   <view  class="input-item">
	    <view class="cuIcon-people icon"></view>
	    <!-- <view class="cuIcon-mobilefill icon"></view> -->
<!-- 		<view class="phone-desc">
			<text>+86</text>
			<text class="cuIcon-unfold"></text>
		</view> -->
		<input  v-model="loginForm.username" class="input" type="text" placeholder="请输入手机号"
			maxlength="11" />
		<view class="rule-text">
			{{formRule.usernameRule}}
		</view>
   </view>
   <view  class="input-item ">
   	    <view class="cuIcon-lock icon"></view>
   		<input  v-model="loginForm.userpwn" class="input" :password="!isPwnStatus"  type="text" placeholder="请输入6~12位密码"
   			maxlength="12"  />
		<view class="cuIcon-attentionfill fillicon" v-if="isPwnStatus" @click="isPwnStatus=!isPwnStatus"></view>	
		<view class="cuIcon-attentionforbidfill fillicon" v-else @click="isPwnStatus=!isPwnStatus"></view>	
		<view class="rule-text">
			{{formRule.userpwnRule}}
		</view>
   </view>
   <view class="other-btn">
		<text>没有账号?</text>
		<!-- <text @click="openRegister">前往注册</text> -->
   </view>
   
   <button :loading="loading"  :class="loading ?'loading':''" class="zx-btn login-btn" @click="login" >登录</button>
   <view class="yzm" @click="openYzmPage"><text>使用验证码登录</text></view>
   
  </view>
</template>

<script>
let rule = getApp().globalData.config.rule
  export default {
    data() {
      return {
		    isPwnStatus:false,
			loading:false,//请求加载中
			loginForm:{
				username:"13888888888",
				userpwn:"123456",
			},
			formRule:{
				usernameRule:"",
				userpwnRule:""
			}
        }
    },
	onLoad() {
		
	},
    methods: {
		//打开验证页
		openYzmPage(){
			uni.redirectTo({
				url:"/pages/yzm-login"
			})
		},
		//打开注册页
		openRegister(){
			uni.navigateTo({
				url:"/pages/register"
			})
			
		},
		login(){
	
			if(this.verify()){
				this.loading=true
				
				this.$store.dispatch('Login', this.loginForm).then((res) => {
				  this.loading=false
				  // this.$modal.closeLoading()
				  uni.reLaunch({
				  	url:"/pages/work/merchant"
				  })
				}).catch((err) => {
					this.loading=false
					
				})
							
			}
			

		},
		//验证规则
		verify(){
			let keys = Object.keys(this.formRule);
			let num=0;
			// if(!rule.phone.test(this.loginForm.username)){
			// 	this.formRule.usernameRule = "请输入正确手机号"

			// }else{
			// 	this.formRule.usernameRule = ""
			// 	num++
			// }
			
			if(!this.loginForm.username.length>=6){
				this.formRule.usernameRule = "请输入账号!"
			
			}else{
				this.formRule.usernameRule = ""
				num++
			}
			 
			if(! (this.loginForm.userpwn.length>=6&&this.loginForm.userpwn.length<=12 )){
				
				this.formRule.userpwnRule = "请输入长度为6~12的密码!"
			}else{
				this.formRule.userpwnRule =""
				num++
			}
			
			return (num >= keys.length);
		},

    }
  }
  
</script>

<style lang="scss" scoped>

  .pwn-login-container {
    width: 100%;
	padding: 0 48rpx;
	.title{
		text-align: center;
		margin-top: 80rpx;
		font-size: 56rpx;
		color: #000000;
	}
	.desc{
		margin-top: 16rpx;
		text-align: center;
		font-size: 26rpx;
		color: #969799;
	}
   

   .other-btn{
	   display: flex;
	   justify-content: flex-end;
	   margin-top: 24rpx;
	   text{
		   color: #B9B9B9;
		   font-size: 26rpx;
		   margin-right: 6rpx;
	   }
	   text+text{
		   color: #165DFF;
		   border-bottom: 1px solid #165DFF;
	   }
   }
   .login-btn{
	   margin-top: 164rpx;
	   letter-spacing:12rpx;
   }
    .yzm{
		margin-top: 48rpx;
		text-align: center;
		color: #0973F4;

		
	}
  }

</style>
